<template>
	<div>
		<div class="news_lie">
			<div class="pb_hader">
				<p>
					<span class="lt_span">{{newsname}}</span>
					<a class="rg_a"><span>首页</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span>新闻中心</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span class="rg_sp">{{newsname}}</span></a>
				</p>
			</div>
			<div class="news_odiv1">
				<ul>
					<li v-for="(item,index) in newslist" :key="index">
						<img class="a_imgs" :src="item.news_img">
						<div class="news_rigts">
							<a class="news_p" href="SF_news_xq.html">{{item.news_title}}</a>
							<div class="shil">
								<span><i class="fa fa-user"></i><a>{{item.news_name}}</a></span>
								<span><i class="fa fa-eye"></i><a>{{item.news_ck}}</a></span>
								<span><i class="fa fa-clock-o"></i><a>{{item.news_time}}</a></span>
							</div>
							<p class="shi_p">{{item.news_xq}}</p>
						</div>
					</li>
				</ul>
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="querytInfo.pagenum"
				 layout="prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				newsname:'公司新闻',
				newslist: [{
					news_img: require('../../assets/images/xw_imfs.png'),
					news_title: '合肥采用DBO方式一次性建成35个乡镇污水处理厂并基本通过环保验收',
					news_name: 'admin',
					news_ck: '855',
					news_time: '2016-10-10',
					news_xq: '近日，山东省发改委下达了关于发布2016年认定山东省工程实验室（工程研究中心）名单的通知”（鲁发改高技〔2016〕247号），我公司“高强度粉末冶金刀具工程实验室”被认定.......，我公司“高强度粉末冶金刀具工程实验室”被认定.......'
				}, {
					news_img: require('../../assets/images/xw_imfs.png'),
					news_title: '合肥采用DBO方式一次性建成35个乡镇污水处理厂并基本通过环保验收',
					news_name: 'admin',
					news_ck: '855',
					news_time: '2016-10-10',
					news_xq: '近日，山东省发改委下达了关于发布2016年认定山东省工程实验室（工程研究中心）名单的通知”（鲁发改高技〔2016〕247号），我公司“高强度粉末冶金刀具工程实验室”被认定.......，我公司“高强度粉末冶金刀具工程实验室”被认定.......'
				}, {
					news_img: require('../../assets/images/xw_imfs.png'),
					news_title: '合肥采用DBO方式一次性建成35个乡镇污水处理厂并基本通过环保验收',
					news_name: 'admin',
					news_ck: '855',
					news_time: '2016-10-10',
					news_xq: '近日，山东省发改委下达了关于发布2016年认定山东省工程实验室（工程研究中心）名单的通知”（鲁发改高技〔2016〕247号），我公司“高强度粉末冶金刀具工程实验室”被认定.......，我公司“高强度粉末冶金刀具工程实验室”被认定.......'
				}, {
					news_img: require('../../assets/images/xw_imfs.png'),
					news_title: '合肥采用DBO方式一次性建成35个乡镇污水处理厂并基本通过环保验收',
					news_name: 'admin',
					news_ck: '855',
					news_time: '2016-10-10',
					news_xq: '近日，山东省发改委下达了关于发布2016年认定山东省工程实验室（工程研究中心）名单的通知”（鲁发改高技〔2016〕247号），我公司“高强度粉末冶金刀具工程实验室”被认定.......，我公司“高强度粉末冶金刀具工程实验室”被认定.......'
				}, {
					news_img: require('../../assets/images/xw_imfs.png'),
					news_title: '合肥采用DBO方式一次性建成35个乡镇污水处理厂并基本通过环保验收',
					news_name: 'admin',
					news_ck: '855',
					news_time: '2016-10-10',
					news_xq: '近日，山东省发改委下达了关于发布2016年认定山东省工程实验室（工程研究中心）名单的通知”（鲁发改高技〔2016〕247号），我公司“高强度粉末冶金刀具工程实验室”被认定.......，我公司“高强度粉末冶金刀具工程实验室”被认定.......'
				}, {
					news_img: require('../../assets/images/xw_imfs.png'),
					news_title: '合肥采用DBO方式一次性建成35个乡镇污水处理厂并基本通过环保验收',
					news_name: 'admin',
					news_ck: '855',
					news_time: '2016-10-10',
					news_xq: '近日，山东省发改委下达了关于发布2016年认定山东省工程实验室（工程研究中心）名单的通知”（鲁发改高技〔2016〕247号），我公司“高强度粉末冶金刀具工程实验室”被认定.......，我公司“高强度粉末冶金刀具工程实验室”被认定.......'
				}, {
					news_img: require('../../assets/images/xw_imfs.png'),
					news_title: '合肥采用DBO方式一次性建成35个乡镇污水处理厂并基本通过环保验收',
					news_name: 'admin',
					news_ck: '855',
					news_time: '2016-10-10',
					news_xq: '近日，山东省发改委下达了关于发布2016年认定山东省工程实验室（工程研究中心）名单的通知”（鲁发改高技〔2016〕247号），我公司“高强度粉末冶金刀具工程实验室”被认定.......，我公司“高强度粉末冶金刀具工程实验室”被认定.......'
				}, {
					news_img: require('../../assets/images/xw_imfs.png'),
					news_title: '合肥采用DBO方式一次性建成35个乡镇污水处理厂并基本通过环保验收',
					news_name: 'admin',
					news_ck: '855',
					news_time: '2016-10-10',
					news_xq: '近日，山东省发改委下达了关于发布2016年认定山东省工程实验室（工程研究中心）名单的通知”（鲁发改高技〔2016〕247号），我公司“高强度粉末冶金刀具工程实验室”被认定.......，我公司“高强度粉末冶金刀具工程实验室”被认定.......'
				}],
				
				newsnamelist:['公司新闻','行业新闻'],

				querytInfo: {
					query: '',
					// 当前页数
					pagenum: 1,
					// 总条数
					pagesize: 2
				},
				total: 8,
				newsid: ''
			}
		},
		mounted() {
			this.newsid = this.$route.params.id
		},
		methods: {
			// 监听psgesize 改变
			handleSizeChange(newsize) {
				// console.log(newsize);
				this.querytInfo.pagesize = newsize
			},
			// 监听 页码值 改变
			handleCurrentChange(newpage) {
				// console.log(newpage);
				this.querytInfo.pagenum = newpage
			},
		},
		// 监听路由变化，操作数据更新
		watch: {
			$route(to, from) {
				this.newsid = this.$route.params.id
				this.newsname = this.newsnamelist[this.newsid-1]
				// this.$HTTP.get('', {
				// 	params: this.newsid
				// })
				// .then((res) => {
				// 	// this.newslist = res
				// 	// this.total = res.total
				// })
				// .catch((error) => {
				// 	console.log(error)
				// })
			}
		}
	}
</script>

<style scoped>
	.news_lie {
		width: 100%;
		height: auto;
		border: 1px solid #EEEEEE;
		float: left;
		box-sizing: border-box;
	}

	.pb_hader {
		width: 100%;
		height: auto;
		padding: 0 20px;
		box-sizing: border-box;
		border-bottom: none;
		background: #fff;
	}

	.pb_hader p {
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #e5e5e5;
		line-height: 50px;
	}

	.pb_hader p .lt_span {
		border-left: 4px solid #0069b1;
		font-size: 18px;
		line-height: 30px;
		margin-top: 10px;
		padding: 0 12px;
		color: #1f2f3a;
	}

	.pb_hader p .rg_a {
		display: inline-block;
		float: right;
		font-size: 14px;
		color: #b3b2b2;
		margin-left: 5px;
	}

	.pb_hader p .rg_a .rg_sp {
		color: #7c7c7c;
	}

	.pb_center {
		width: 100%;
		height: auto;
	}

	.news_odiv1 {
		width: 100%;
		height: auto;
		float: left;
	}

	.news_odiv1 ul li {
		width: 100%;
		height: auto;
		padding: 25px 25px;
		box-sizing: border-box;
		border-bottom: 1px solid #eeeeee;
		float: left;
		box-sizing: border-box;
	}

	.news_odiv1 .a_imgs {
		width: 24%;
		height: 132px;
		display: inline-block;
		float: left;
	}

	.news_odiv1 .a_imgs img {
		width: 100%;
		height: 100%;
	}

	.news_rigts {
		width: 74%;
		float: right;
		height: auto;
	}

	.news_rigts .news_p {
		display: inline-block;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #585757;
		line-height: 40px;
		font-size: 18px;
	}

	.news_rigts .shil span {
		display: inline-block;
		float: left;
		color: #bebebe;
		margin-right: 12px;
		line-height: 30px;

	}

	.news_rigts .shil span i {
		font-size: 14px;
		margin-right: 5px;
	}

	.news_rigts .shi_p {
		width: 100%;
		line-height: 24px;
		color: #868686;
		font-size: 14px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-indent: 2em;
	}

	.el-pagination {
		width: 100%;
		margin: 20px 0;
		text-align: center;
		float: left;
	}
</style>
